<template>
	<view class="changeBatteries">
		<view class="banner">
			<swiper class="swiper" circular :indicator-dots="true" indicator-color="rgba(255,255,255,0.5)"
				indicator-active-color="#ffffff" :autoplay="true" style="height: 512rpx;">
				<swiper-item v-for="(item, index) in banner">
					<image style="width: 100%; height: 512rpx;" mode="scaleToFill" :src="item.image"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="tipsBox">
			<image src="../../static/img/index/tips.png" class="tipsBg" mode=""></image>
			<view class="title">规则说明</view>
		</view>
		<view class="tableBox">
			<uni-table border stripe emptyText="暂无更多数据">
				<uni-tr v-for="(item,index) in equipBillingRules" :key="index">
					<uni-td>{{item.key}}</uni-td>
					<uni-td>{{item.value}}</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		<view class="bottonGround">
			<view class="button1" @click="exchangeForBattery">换取</view>
		</view>
		<!-- 错误提示框-->
		<view class="mask" v-if="error">
			<view class="pay">
				<view class="tit">温馨提示</view>
				<view class="con" v-html="msg"></view>
				<view class="button">
					<button type="default" class="exit" @click="close">{{countDown}}s确定</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		ment,
		
	} from '../../api/api.js';
	import {
		getEquipRule,
		exchangeForBattery
	} from '../../api/equip.js';
	
	export default {
		data() {
			return {
				order_id: null, //订单号
				code: null, //设备号
				error: false, //是否显示错误弹窗
				countDown: 5, //弹窗计数
				timer: null, //弹窗定时器
				msg: '', //弹窗错误信息
				banner: [], //轮播图
				equipBillingRules: [], //设备计费规则
			}
		},
		onLoad(options) {
			if (options && options.order_id) {
				this.order_id = options.order_id
				this.device_id = options.device_id
				this.getEquipRule()
			}
			this.getMent();
		},
		methods: {
			getEquipRule() {
				getEquipRule({
					id: this.device_id
				}).then(res => {
					this.equipBillingRules = res.data.data
				})
			},
			openCountDown() {
				this.countDown = 5
				this.timer = setInterval(() => {
					if (this.countDown == 0) {
						clearInterval(this.timer)
						uni.switchTab({
							url: '/pages/index/index'
						})
					} else {
						this.countDown--
					}
				}, 1000)
			},
			close() {
				clearInterval(this.timer)
				this.error = false;
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			exchangeForBattery() {
				exchangeForBattery({
					order_id: this.order_id
				}).then(res => {
					if (res.code == 1) {
						this.error = true;
						this.openCountDown()
						this.msg = `电池： ${res.data.item_code ? res.data.item_code : '' }号仓门已打开。请归还旧电池，归还后10秒钟内，有新的仓门会打开`;
					}
				})
			},
			getMent() {
				ment().then(res => {
					this.banner = res.data.banner;
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.mask {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		z-index: 99;
		background: rgba($color: #000000, $alpha: 0.3);
		display: flex;
		align-items: center;
		justify-content: center;

		.pay {
			width: 580rpx;
			min-height: 340rpx;
			padding: 10rpx 30rpx 30rpx;
			background: #ffffff;
			border-radius: 12px;
			position: relative;

			.tit {
				width: 100%;
				text-align: center;
				margin: 30rpx auto 30rpx;
			}

			.con {
				width: 80%;
				margin: 0 auto;
				color: #666;
				text-align: center;
			}

			.button {
				margin-top: 45rpx;
				display: flex;
				justify-content: center;

				button {
					width: 200rpx;
					height: 88rpx;
					line-height: 88rpx;
					background: #3eb9ff;
					border-radius: 44rpx;
					border: 1rpx solid #f2f2f2;
					color: #fff;
				}
			}
		}
	}

	.tipsBox {
		position: relative;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 42rpx 0 44rpx;
		font-size: 32rpx;
		color: #1F90FE;

		.tipsBg {
			position: absolute;
			width: 496rpx;
			height: 36rpx;
			left: 50%;
			transform: translateX(-50%);
		}
	}

	.tableBox {
		width: 694rpx;
		margin: 0 auto;
	}

	.bottonGround {
		width: 694rpx;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.button1,
		{
		width: 100%;
		height: 100rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		background: #3EB9FF;
		line-height: 100rpx;
		text-align: center;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}


	}
</style>